import React from 'react';
import { Link } from 'react-router-dom';
import './style.scss';

interface StateInterface {
    name: string;
    active: boolean;
}

interface Te {
    data: Array<StateInterface>;
}

export default class Index extends React.Component<{}, Te> {
    constructor(props: any) {
        super(props);
        this.state = {
            data: [
                {
                    name: 'home',
                    active: true
                },
                {
                    name: 'test',
                    active: false
                },
                {
                    name: 'scroll',
                    active: false
                }
            ]
        };
    }
    render() {
        return (
            <header className="header">
                <ul>
                    {
                        this.state.data.map(item => (
                            <li key={item.name} className={item.active ? 'active' : ''}>
                                <Link to={`/${item.name}`}>{item.name}</Link>
                            </li>
                        ))
                    }
                </ul>
            </header>
        );
    }
}
